<template>
  <div class="page-container">
    <div class="common-content-wrap">
      <div class="tab-handle-wrap fx-bt-ct mg-bt-16">
        <div class="handoff">
          <div
            :class="{ selected: item.value == tagVal }"
            :key="item.value"
            v-for="item in tagList"
            @click="tagHandle(item)"
          >
            {{ item.label }}
          </div>
        </div>
        <!-- <div class="common-btn-wrap whiteStatus">删除</div> -->
        <div
          class="common-btn-wrap blueStatus"
          v-show="tagVal == 2"
          @click="designAddHandle"
        >
          保存
        </div>
        <div
          class="common-btn-wrap blueStatus"
          v-show="tagVal == 3"
          @click="operateHandle('', 'recomAdd')"
        >
          新增
        </div>
      </div>

      <div class="tab-banner" v-show="tagVal == 1">
        <div class="file-img-list">
          <div
            class="file-img-item"
            v-for="(item, index) in valueList"
            :key="index"
          >
            <el-image
              :src="item.filePath"
              :preview-src-list="valueList.map((k) => k.filePath)"
            >
            </el-image>
            <div class="ab-icon choice"></div>
            <div class="ab-icon delete" @click="removeHandle(item.id)"></div>
          </div>

          <UploadBtn
            v-show="valueList.length < 5"
            action="/admin-api/infra/file/upload"
            @success="successHandle"
          />
        </div>
      </div>
      <div class="tab-banner" v-show="tagVal == 2">
        <div class="file-img-list">
          <div class="file-img-item" v-if="designParams.filePath">
            <el-image
              :src="designParams.filePath"
              :preview-src-list="[designParams.filePath]"
            >
            </el-image>
            <div class="ab-icon delete" @click="designRemoveHandle"></div>
          </div>

          <UploadBtn
            v-show="!designParams.filePath"
            action="/admin-api/infra/file/upload"
            @success="designListSuccessHandle"
          />
        </div>
        <div class="mg-tp-24 mg-bt-8 cr-bk-9 ft-14">图片描述</div>
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="designParams.content"
          style="width: 60%"
        >
        </el-input>
      </div>

      <TrTable
        v-show="tagVal == 3"
        ref="trTable"
        isNeedIndex
        isPopup
        v-model="searchParams"
        :tableData="tableData"
        :tableColumn="tableColumn"
        :total="totalNum"
        requestName="getRecomList"
        @rowDelete="operateHandle($event, 'rowDelete')"
        @rowEdit="operateHandle($event, 'rowEdit')"
      />
      <TrFormPopup
        v-model="isShowRecomEdit"
        :title="checkTitle"
        :width="480"
        :valueObj.sync="formObj"
        :formData="formData"
        :list="popupList"
        @close="isShowRecomEdit = false"
        @confrim="confrimRecomHandle"
      />
    </div>
  </div>
</template>

<script>
import UploadBtn from "@/components/upload-btn/Upload-btn.vue";
import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrFormPopup from "@/components/Tr-form/Tr-form-popup.vue";
import {
  getList,
  remove,
  add,
  getDesignList,
  designAdd,
  getRecomList,
  recomAdd,
  recomRemove,
  recomEdit,
} from "@/api/configuration/basic.js";
export default {
  name: "BasicBox",
  components: {
    UploadBtn,
    TrTable,
    TrFormPopup,
  },
  data: () => ({
    tagVal: 1,
    tagList: [
      { label: "轮播图", value: 1 },
      { label: "全卫设计", value: 2 },
      { label: "设计推荐", value: 3 },
    ],
    valueList: [],
    designList: [],
    designParams: {
      filePath: "",
      content: "",
    },
    searchParams: {
      pageNo: 1,
      pageSize: 10,
    },
    tableData: [],
    tableColumn: [
      {
        type: "text",
        label: "关联设计推荐",
        value: "statusName",
      },
      {
        type: "text",
        label: "标题",
        value: "title",
      },
      {
        type: "text",
        label: "标签",
        value: "tagStr",
      },
      {
        type: "option",
        label: "操作",
        width: 100,
        showBtnList: [
          {
            label: "编辑",
            option: "rowEdit",
          },
          {
            label: "删除",
            option: "rowDelete",
          },
        ],
      },
    ],
    totalNum: 0,
    isShowRecomEdit: false,
    currentHandle: "",
    formObj: {},
    formData: {},
    popupList: [
      {
        label: "关联设计推荐",
        type: "select",
        width: 100,
        list: [
          {
            label: "推荐1",
            value: 4024,
          },
          {
            label: "推荐2",
            value: 4025,
          },
        ],
        value: [],
        multiple: true,
        id: "designRecommendationIds",
      },
      {
        label: "标题",
        type: "input",
        width: 100,
        value: "",
        id: "title",
      },
      {
        label: "标签1",
        type: "input",
        width: 100,
        value: "",
        id: "labelOne",
        isNeed: false,
      },
      {
        label: "标签2",
        type: "input",
        width: 100,
        value: "",
        id: "labelTwo",
        isNeed: false,
      },
      {
        label: "标签3",
        type: "input",
        width: 100,
        value: "",
        id: "labelThree",
        isNeed: false,
      },
      {
        label: "标签4",
        type: "input",
        width: 100,
        value: "",
        id: "labelFour",
        isNeed: false,
      },
      {
        label: "标签5",
        type: "input",
        width: 100,
        value: "",
        id: "labelFive",
        isNeed: false,
      },
    ],
  }),
  computed: {
    checkTitle() {
      return this.currentHandle == "add" ? "新增" : "编辑";
    },
  },
  methods: {
    tagHandle(tagObj) {
      if (!tagObj.value == this.tagVal) return;
      this.tagVal = tagObj.value;
    },
    designListSuccessHandle(val) {
      this.designParams.filePath = val;
      this.$message.success(this.$t("msg.success"));
    },
    designRemoveHandle() {
      this.designParams.filePath = "";
    },
    async designAddHandle() {
      if (!this.designParams.filePath)
        return this.$message.warning("请上传设计图片");
      if (!this.designParams.content)
        return this.$message.warning("请输入图片描述");
      const res = await designAdd(this.designParams);
      if (res.code == 0) {
        this.$message.success(this.$t("msg.success"));
        // this.getFileList();
      }
    },
    async successHandle(val) {
      const res = await add({
        filePath: val,
        sort: 1,
      });
      if (res.code == 0) {
        this.$message.success(this.$t("msg.success"));
        this.getFileList();
      }
    },
    async getFileList() {
      const { data: res } = await getList({ pageNo: 1, pageSize: 5 });
      this.valueList = res.list;
    },
    async getDesignList() {
      const { data: res } = await getDesignList({ pageNo: 1, pageSize: 5 });
      if (res.list.length) {
        let { filePath, content } = res.list[0];
        this.designParams.filePath = filePath;
        this.designParams.content = content;
      }
    },
    removeHandle(id) {
      this.$textShow({
        title: this.$t("tip.label"),
        content: [this.$t("tip.delete")],
      })
        .then(async () => {
          await remove(id);
          this.$message.success(this.$t("msg.success"));
          this.getFileList();
        })
        .catch(() => {});
    },
    async getRecomList() {
      const { data: res } = await getRecomList(this.searchParams);
      this.tableData = res.list;
      this.tableData.forEach((item) => {
        let list = [];
        if (item.labelOne) list.push(item.labelOne);
        if (item.labelTwo) list.push(item.labelTwo);
        if (item.labelThree) list.push(item.labelThree);
        if (item.labelFour) list.push(item.labelFour);
        if (item.labelFive) list.push(item.labelFive);
        item["tagStr"] = list.join(",");
      });
      this.$validateData(this.tableData);

      this.totalNum = res.total;
    },
    confrimRecomHandle() {
      if (this.currentHandle == "rowEdit") {
        this.formObj.id = this.formData.id;
        this.editRecomHandle(this.formObj);
        return;
      }
      this.addRecomHandle(this.formObj);
    },
    editRecomHandle(row) {
      recomEdit(row).then((res) => {
        this.isShowRecomEdit = false;
        this.formObj = {};
        this.getRecomList();
        this.$message.success(this.$t("msg.success"));
      });
    },
    addRecomHandle(row) {
      recomAdd(row).then((res) => {
        this.isShowRecomEdit = false;
        this.formObj = {};
        this.getRecomList();
        this.$message.success(this.$t("msg.success"));
      });
    },
    operateHandle(val, type) {
      this.currentHandle = type;
      this.formData = type == "rowEdit" ? val : {};
      switch (type) {
        case "rowDelete":
          this.recomRemoveHandle(val.id);
          return;
      }
      this.isShowRecomEdit = true;
    },
    recomRemoveHandle(id) {
      this.$textShow({
        title: this.$t("tip.label"),
        content: [this.$t("tip.delete")],
      })
        .then(async () => {
          await recomRemove(id);
          this.$message.success(this.$t("msg.success"));
          this.getRecomList();
        })
        .catch(() => {});
    },
  },
  created() {
    this.getFileList();
    this.getDesignList();
    this.getRecomList();
  },
};
</script>

<style lang="scss" scoped>
.common-content-wrap {
  background-color: #fff;
  padding: 24px;
}
.file-img-item {
  position: relative;
  width: 272px;
  height: 154px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  &::before {
    z-index: 1;
    transition: all 0.3s;
    pointer-events: none;
    position: absolute;
    display: block;
    opacity: 0;
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    border-radius: 2px;
  }
  &:hover {
    &::before,
    &::after,
    .ab-icon {
      opacity: 1;
    }
  }
}
.file-img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ab-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 12px;
  z-index: 2;
  opacity: 0;
  &.choice {
    left: 12px;
  }
  &.delete {
    right: 12px;
    background: url("~@/assets/common/delete_1.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
}
</style>
